<!--
@name:dialogUpdateTheme
@author:Zhenglei
@date:16:42
@description:dialogUpdateTheme
@update:2022/8/2216:42
-->
<template>
  <el-dialog :title="title"
             :visible.sync="visible"
             append-to-body
             :before-close="modalClose"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             width="50%">
    <el-form :model="themeData"
             label-position="right"
             label-width="150px"
             ref="formModelRef"
             :rules='formModelRules'>
      <el-form-item label="类型：" prop="themeObj">
        <el-select v-model="themeData.themeObj"
                   value-key="themeType"
                   class="w-300"
                   @change="handleChangeType"
                   placeholder="请选择类型">
          <el-option v-for="item in typeDataSource"
                     :key="item.themeType"
                     :label="item.themeTypeName"
                     :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="主题/项目：" prop="item">
        <el-select v-model="themeData.item"
                   filterable
                   class="w-300"
                   value-key="id"
                   placeholder="请选择主题项目">
          <el-option v-for="item in themeDataSource"
                     :key="item.id"
                     :label="item.themeName"
                     :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单位任务名称：">
        <el-input class="w-300" v-model="themeData.aliasName" placeholder="请输入单位任务名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="排序：" prop="orderSort">
        <el-input class="w-300" type="number" v-model="themeData.orderSort" placeholder="请输入排序" clearable></el-input>
      </el-form-item>


    </el-form>
    <p align="center">
      <el-button @click="modalClose"
                 type="info">取 消
      </el-button>
      <el-button type="primary"
                 v-prevent-re-click
                 @click="handleSave()">保 存
      </el-button>
    </p>

  </el-dialog>
</template>

<script>
export default {
  name: "dialogUpdateTheme",
  props: {
    themeDataObj: {
      type: Object,
      default: {}
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      title: '新 增',
      themeData: {
        themeObj: '',
        item: '',
        aliasName: '',
        orderSort: '',
        mustStatus: 0,
      },
      typeDataSource: [],
      themeDataSource: [],
      formModelRules: {
        themeObj: [{required: true, message: '请选择类型', trigger: 'blur'},],
        item: [{required: true, message: '请选择主题', trigger: 'blur'},],
        orderSort: [{required: true, message: '请输入排序', trigger: 'blur'},],

      }

    }
  },
  created() {
    if (this.themeDataObj.themeType) {
      console.log('详情', this.themeDataObj)
      this.title = '编 辑'
      this.themeData.themeObj = {themeType: this.themeDataObj.themeType, themeTypeName: this.themeDataObj.themeTypeName}
      this.themeData.item = {id: this.themeDataObj.themeId, themeName: this.themeDataObj.themeName}
      this.themeData.orderSort = this.themeDataObj.orderSort
      this.themeData.aliasName = this.themeDataObj.aliasName
      this.themeData.mustStatus = this.themeDataObj.mustStatus

    } else {
      this.title = '新 增'
    }
    this.getType()
  },
  methods: {
    modalClose() {
      this.$emit('update:visible', false);
    },
    handleChangeType(val) {
      this.themeData.item = ''
      this.themeDataSource = val.baseInfos
    },
    handleSave() {
      this.$refs.formModelRef.validate(valid => {
        if (valid) {
          let resultData = {
            themeId: '',
            themeName: '',
            themeType: '',
            themeTypeName: '',
            aliasName: '',
            orderSort: '',
            mustStatus: '',
          }
          resultData.themeType = this.themeData.themeObj.themeType
          resultData.themeTypeName = this.themeData.themeObj.themeTypeName
          resultData.themeId = this.themeData.item.id
          resultData.themeName = this.themeData.item.themeName
          resultData.aliasName = this.themeData.aliasName
          resultData.orderSort = this.themeData.orderSort
          resultData.mustStatus = this.themeData.mustStatus
          this.$emit('handleResultData', resultData)
          this.modalClose()
        }
      })

    },
    getType() {
      this.post(this.api.healthMap.getInitiativeTaskBaseInfo).then((res) => {
        if (res.data.code === '200') {
          this.typeDataSource = res.data.object
          if (this.themeDataObj.themeType) {

            this.themeDataSource = this.typeDataSource.find(item => item.themeType === this.themeDataObj.themeType).baseInfos
          }
        }
      })
    }
  },
}
</script>

<style scoped>

</style>
